<template>
	<div class="box dvfdvgdf" >
		
		<header-container>
			<!-- <test1 
				v-for="(item, index) in pageTree.header.test1"
				:key="index"
				v-sdrag:real="{id: item.id, index: item.index, com: item.id, dragable: 0}" >
			</test1> -->
			<div @click="test">测试按钮</div>
			<cust-page1></cust-page1>	
			<m-header :hasList="true"></m-header>
		</header-container>
		<content-container >
			<test1 v-for="(item, index) in pageTree.content.test1"
					:key="index"  
					v-sdrag:real="{id: item.id, index: item.index, com: item.id, dragable: 1}">
			</test1> 
			<test2 
				v-for="(item, index) in pageTree.content.test2"
				:key="index"  
				v-sdrag:real="{id: item.id, index: item.index, com: item.id, dragable: 1}">
			</test2>
			<test3 
				v-for="(item, index) in pageTree.content.test3"
				:key="index"  
				v-sdrag:real="{id: item.id, index: item.index, com: item.id, dragable: 1}">
			</test3>
			<v-carousel 
				:swipimgage="imgUrl" 
				:swipimgagewidth="screenWidth" 
				:swipimgageheight="screenWidth"
				v-for="(item, index) in pageTree.content.banner"
				:key="index"  
				v-sdrag:real="{id: item.id, index: item.index, com: item.id, dragable: 1, type: type.banner}"
			>
			</v-carousel>
			<m-activity 
				v-for="(item, index) in pageTree.content[type.activity]"
				:id="item.id"
				:type="type.activity"
				:key="index"  
				v-sdrag:real="{id: item.id, index: item.index, com: item.id, dragable: 1, type: type.activity}"
			>
			</m-activity>

		</content-container>
		<footer-container>
			<test1 
				v-for="(item, index) in pageTree.footer.test1"
				:key="index"
				v-sdrag:real="{id: item.id, index: item.index, com: item.id}" >
			</test1>
		</footer-container>
	</div>

</template>

<script>
import test1 from "../../real-components/Test1";
import test2 from "../../real-components/Test2";
import test3 from "../../real-components/Test3";
import {mapGetters} from "vuex";
import {getPageTree, initDomTree} from "../../utils/getPageTree";
import ContentContainer from "../../real-components/ContentContainer";
import HeaderContainer from "../../real-components/HeaderContainer";
import FooterContainer from "../../real-components/FooterContainer";
import BoxContainer from "../../real-components/BoxContainer";
import Header from "../../real-containers/header";
import Carousel from "../../real-components/HomeCarousel";
import CustomerActivity from "./CustomerActivity";
import {MGDialog} from "../../ui-components";
export default {
  	data () {
    	return {
			msg: '这是测试首页',
			// pageTree: []
			page: "index",
			type: {
				list: "list",
				header: "header",
				banner: "banner",
				activity: "CustomerActivity"
			},
			mDialog: null
		}
	},
	computed: {
		...mapGetters([
			"com1Data",
			"com2Data"
		]),
		pageTree () {
			return getPageTree(this, this.page);
		},
		screenWidth() {
			if (window.environment === "production") {
				return window.innerWidth;
			} else {
				return 375;
			}
		},
		imgUrl() {
			return [
				"static/image/demo1.png",
				"static/image/demo2.png",
				"static/image/demo3.png",
			]
		}
	},
	components: {
		test1,
		test2,
		test3,
		"content-container": ContentContainer,
		"header-container": HeaderContainer,
		"footer-container": FooterContainer,
		"box-container": BoxContainer,
		"m-header": Header,
		"v-carousel": Carousel,
		"m-activity": CustomerActivity,
		"cust-page1": () => import("../../real-containers/HomeCustPage/CustPage1/index.vue"),
	},
	created () {
		this.mDialog = new MGDialog();
		console.log("当前的domTree", this.$store.getters.getDomTree);
		console.log("当前的domTree", JSON.stringify(this.$store.getters.getDomTree));
	},
	mounted () {
		initDomTree(this.$store.getters.getDomTree.index);
	},
	updated() {
		//页面更新完毕
		console.log("页面更新完毕");
		initDomTree(this.$store.getters.getDomTree.index);
	},
	methods: {
		test() {
			this.mDialog.showDialog();
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.box {
		/* display: flex; */
	}
	.style-components {
		display: flex;
		flex-flow: column nowrap;
	}
	.container {
		width: 800px;
		height: 300px;
		border: 1px solid red;

	}
</style>
